<div >

    <div class="breadcrumb">
        <a class="prev" routerLink="/basicSetting/cp"></a>
        <a class="next"></a>
    </div>
    <div nz-row class="my-tab-hed">
        <h3 nz-col nzSpan="12">创建首页广告位</h3>
    </div>
    <form nz-form class="tour-form" [formGroup]="validateForm">

        <div nz-row [nzGutter]="24" class="my-add-form-item">

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="title">广告位标题</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('title')">
                        <input nz-input id="title" formControlName="title" placeholder="标题" />
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="displayPriority">广告位位置</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('displayPriority')">
                        <input type="number" nz-input id="displayPriority" formControlName="displayPriority"
                            placeholder="图片排序序号" />
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>

        <div nz-row [nzGutter]="24" class="my-add-form-item">

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="providerType">关联</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('providerType')">
                        <nz-select formControlName="providerType">
                            <nz-option nzValue="AGENCY" nzLabel="机构"></nz-option>
                            <nz-option nzValue="GUIDE" nzLabel="服务"></nz-option>
                            <nz-option nzValue="OTHER" nzLabel="其他"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8" *ngIf='validateForm.value.providerType == "OTHER"'>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="memo">url</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('url')">
                        <input nz-input id="url" formControlName="url" placeholder="需跳转的网址" />
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8" *ngIf='validateForm.value.providerType == "AGENCY"'>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="agencyId">机构</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('agencyId')">
                        <nz-select formControlName="agencyId">
                            <nz-option *ngFor="let item of AgencyList" nzValue="{{item.id}}" nzLabel="{{item.name}}">
                            </nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8" *ngIf='validateForm.value.providerType == "GUIDE" '>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="guideId">服务</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('guideId')">
                        <nz-select formControlName="guideId" [nzShowArrow]='false' nzDisabled>
                            <nz-option *ngFor="let option of GuideList" [nzLabel]="option.name" [nzValue]="option.id">
                            </nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8" *ngIf='validateForm.value.providerType == "GUIDE" '>
                <div nz-row [nzGutter]="24" class="my-add-form-GuideList">
                    <nz-table #columnTable [nzScroll]="{ y: '140px' }" [nzSize]='small' [nzFrontPagination]="false"
                        [nzData]="GuideList">
                        <thead>
                            <tr>
                                <th>服务项名称</th>
                                <th>归属机构</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of GuideList" (click)="selectedRow(data)">
                                <td>{{ data.name }}</td>
                                <td>{{ data.agencyName }}</td>
                            </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>
        </div>
        <div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="24">
                <nz-form-item nzFlex>
                    <nz-form-label nzRequired nzFor="name">广告位图片<span>图片大小不要超过1M，建议尺寸为660px*320px。</span></nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('image')">
                        <clain-image-upload formControlName="image"></clain-image-upload>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <button nz-button class="form-button" [nzType]="'primary'" (click)="submit()"
            [disabled]='validateForm.invalid'>提交</button>
        <button nz-button style="background: #EAEAEA;color: #333333;margin-left: 20px;" class="form-button"
            routerLink="/basicSetting/cp">取消</button>
    </form>

</div>